<script setup lang="ts">
import { ref, h } from 'vue'
import { useI18n } from 'vue-i18n'
import type { MenuProps } from 'ant-design-vue'
import { useAppStore } from '@/stores/app'
import { useAuthStore } from '@/stores/auth'
import SvgIcon from '@/components/base/SvgIcon/index.vue'
import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'Header'
})

const { t, locale } = useI18n()
const appStore = useAppStore()
const authStore = useAuthStore()

// 搜索值
const searchValue = ref('')

// 搜索处理
const onSearch = (value: string) => {
  console.log('搜索:', value)
}

// 全屏状态
const isFullscreen = ref(false)

// 切换全屏
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullscreen.value = false
    }
  }
}

// 切换语言
const changeLanguage = (lang: string) => {
  appStore.setLanguage(lang)
  locale.value = lang
}

// 切换主题
const changeTheme = (theme: string) => {
  appStore.setTheme(theme)
}

// 退出登录
const logout = () => {
  authStore.logoutAction()
}

// 用户菜单
const userMenuItems = [
  {
    key: 'profile',
    label: t('layout.profile'),
    icon: () => h(UserOutlined)
  },
  {
    key: 'settings',
    label: t('layout.settings'),
    icon: () => h(SettingOutlined)
  },
  {
    type: 'divider'
  },
  {
    key: 'logout',
    label: t('common.logout'),
    icon: () => h(LogoutOutlined)
  }
]

// 处理用户菜单点击
const handleUserMenuClick: MenuProps['onClick'] = (info) => {
  const key = info.key as string
  if (key === 'logout') {
    logout()
  } else if (key === 'profile') {
    // 跳转到个人中心
  } else if (key === 'settings') {
    // 跳转到设置页面
  }
}

// 语言菜单
const langMenuItems = [
  {
    key: 'zh-CN',
    label: '简体中文'
  },
  {
    key: 'en-US',
    label: 'English'
  },
  {
    key: 'fr-FR',
    label: 'Français'
  }
]

// 处理语言菜单点击
const handleLangMenuClick: MenuProps['onClick'] = (info) => {
  const key = info.key as string
  changeLanguage(key)
}

// 主题菜单
const themeMenuItems = [
  {
    key: 'default',
    label: t('theme.lightMode')
  },
  {
    key: 'light-green',
    label: t('theme.lightMode') + ' - Green'
  },
  {
    key: 'dark',
    label: t('theme.darkMode')
  },
  {
    key: 'dark-purple',
    label: t('theme.darkMode') + ' - Purple'
  }
]

// 处理主题菜单点击
const handleThemeMenuClick: MenuProps['onClick'] = (info) => {
  const key = info.key as string
  changeTheme(key)
}
</script>

<template>
  <div class="header-container">
    <div class="header-left">
      <div class="search-container">
        <a-input-search
          v-model:value="searchValue"
          placeholder="搜索..."
          style="width: 200px"
          @search="onSearch"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input-search>
      </div>
    </div>
    
    <div class="header-right">
      <!-- 全屏切换 -->
      <div class="header-item" @click="toggleFullscreen">
        <a-tooltip :title="isFullscreen ? t('layout.exitFullscreen') : t('layout.fullscreen')">
          <FullscreenExitOutlined v-if="isFullscreen" />
          <FullscreenOutlined v-else />
        </a-tooltip>
      </div>
      
      <!-- 语言切换 -->
      <a-dropdown>
        <div class="header-item">
          <a-tooltip :title="t('layout.language')">
            <GlobalOutlined />
          </a-tooltip>
        </div>
        <template #overlay>
          <a-menu @click="handleLangMenuClick">
            <a-menu-item v-for="item in langMenuItems" :key="item.key">
              {{ item.label }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      
      <!-- 主题切换 -->
      <a-dropdown>
        <div class="header-item">
          <a-tooltip :title="t('theme.title')">
            <SvgIcon name="theme" />
          </a-tooltip>
        </div>
        <template #overlay>
          <a-menu @click="handleThemeMenuClick">
            <a-menu-item v-for="item in themeMenuItems" :key="item.key">
              {{ item.label }}
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      
      <!-- 通知 -->
      <div class="header-item">
        <a-badge :count="5">
          <a-tooltip :title="t('layout.notification')">
            <BellOutlined />
          </a-tooltip>
        </a-badge>
      </div>
      
      <!-- 用户信息 -->
      <a-dropdown>
        <div class="header-item user-info">
          <a-avatar :size="32" icon="user" />
          <span class="username">Admin</span>
        </div>
        <template #overlay>
          <a-menu @click="handleUserMenuClick">
            <template v-for="item in userMenuItems" :key="item.key">
              <a-menu-item v-if="!item.type" :key="item.key">
                <template #icon v-if="item.icon">
                  <component :is="item.icon" />
                </template>
                {{ item.label }}
              </a-menu-item>
              <a-menu-divider v-else />
            </template>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-container {
  height: $header-height;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $spacing-md;
  
  .header-left {
    display: flex;
    align-items: center;
    
    .search-container {
      margin-left: $spacing-md;
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    
    .header-item {
      padding: 0 $spacing-md;
      height: $header-height;
      display: flex;
      align-items: center;
      cursor: pointer;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.025);
      }
      
      &.user-info {
        .username {
          margin-left: $spacing-sm;
          font-size: $font-size-base;
        }
      }
    }
  }
}
</style> 